<style>
	
</style>
<template>
<div>
    <Card :bordered="false" dis-hover>
        <p slot="title">普票开具</p>
        <Row :gutter="20">
			<Col span="6">
				<Input v-model="search.orderNo" placeholder="单据号" ></Input>
			</Col>
			<Col span="6">
				<Input v-model="search.buyerName" placeholder="购买方" ></Input>
			</Col>
			<!-- <Col span="6">
				<Input v-model="search.invoiceNo" placeholder="发票号" ></Input>
			</Col> -->
			<!-- <Col span="10">
				<DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" 
				placeholder="结算日期" v-model="search.date" style="width:100%;"></DatePicker>
			</Col> -->
			<Col span="2">
				<Button type="primary" icon="ios-search" @click="getdata('search')">搜索</Button>
			</Col>
		</Row>
		<Button type="primary" size="small" @click="kps()" style="margin-top:10px;margin-bottom:10px;">
        	批量开票
        </Button>
        <Button type="primary" size="small" @click="yls()" style="margin-top:10px;margin-bottom:10px;">
        	批量预览</Button>

		<br/>
	    <div class="ivu-table-wrapper" >
            <div class="ivu-table ivu-table-with-fixed-top ">
                
                <div class="ivu-table-body" >
                    <table class="table_border _table"  cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
	                    
                    	<thead>
		                    <tr>
		                    	<th class="" style="width:60px;">
			                        	<div class="ivu-table-cell">
			                        		<Checkbox v-model="check" lable="" @on-change="checkchange"></Checkbox>
			                        		
			                        	</div>
			                    </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>单据号</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>单据日期</span>
		                            </div>
		                        </th>
								 <th class="">
		                            <div class="ivu-table-cell">
		                                <span>销售方</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>购买方</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>订单类型</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span style="width:100px;display:block;">总金额&nbsp;(元)</span>
		                            </div>
		                        </th>
								 <th class="">
		                            <div class="ivu-table-cell">
		                                <span>是否勾选</span>
		                            </div>
		                        </th>
		                        <!-- <th class="">
		                            <div class="ivu-table-cell">
		                                <span>发票号</span>
		                            </div>
		                        </th> -->
		                        <th class="" style="width:180px;">
		                            <div class="ivu-table-cell">
		                                <span>操作</span>
		                            </div>
		                        </th>
		                    </tr>
	                    </thead>
	                    <tbody class="ivu-table-tbody" v-for="item in data">
		                    <tr class="ivu-table-row">
		                    	<td class="">
			                            <div class="ivu-table-cell">
			                        		<Checkbox v-model="item.check" 
			                        		 name="radio_1"></Checkbox>
			                        	</div>
			                    </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>
		                                    {{item.orderNo}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.createDate  | formatDate('yyyy-MM-dd')}}</span>
		                            </div>
		                        </td>
								 <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.salesComName}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.buyerComName}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.orderType | decode('ordertype')}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.totalPriceTax}} </span>
		                            </div>
		                        </td>
								 <td class="">
		                            <div class="ivu-table-cell"
									 :class="item.selectFlag | decode('express_color') ">
		                                <span >
		                                {{item.selectFlag | decode('selectflag')}}</span>
		                            </div>
		                        </td>
		                        
		                        <!-- <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.outputInvoiceNo}}</span>
		                            </div>
		                        </td> -->
		                        <td class="">
		                            <div class="ivu-table-cell">
		                            	<!-- v-show="item.needVerify==1" -->
		                                <Button @click="show(item)" size="small" 
		                                >两票自证</Button>

		                                <Button size="small"  @click="kp(item)">开票</Button>
		                                <!-- <Button size="small"  @click="_kp(item)">开票</Button> -->

		                                <Button @click="_show(item)" size="small" 
		                                >{{item.show?'收起':'详情'}}</Button>

		                                

		                            </div>
		                        </td>
		                    </tr>
		                    <tr class="tr_1" v-show="item.show">
		                        <td colspan="9">
		                        	<div style="margin:0px 20px;">
		                        		<table class="table_7b">
		                        			<thead>
		                        				<th>商品名称</th>
		                        				<th style="width:200px;">商品编码</th>
		                        				<th style="width:200px;">税局编码</th>
		                        				<th>税局名称</th>
		                        				<th style="width:80px;">数量</th>
		                        				<th style="width:80px;">单价&nbsp;(元)</th>
		                        				<th  style="width:100px;">税价总额&nbsp;(元)）</th>
		                        			</thead>
			                                <tbody>
			                                    <tr v-for="is in item.list">
			                                        <td>{{is.goodsName}}</td>
			                                        <td>{{is.goodsCode}}</td>
			                                        <td>{{is.officalCode?is.officalCode:'未匹配税局编码' }}</td>
			                                        <td>{{is.officalName}}</td>
			                                        <td>{{is.goodsQuantity}}  {{is.goodsUnit}}</td>
			                                        <td>{{is.goodsPrice}}</td>
			                                        <td>{{is.goodsTotalPriceTax}}</td>
			                                        
			                                    </tr>
			                                </tbody>
		                            	</table>
		                        	</div>
		                            <div style="padding:0px 20px;background:#f5f5f5;display:none;" class="div1">
		                            	<table class="table_6c" style="display:none;">
			                                <tbody>
			                                    <tr>
			                                        <td>行号</td>
			                                        <td>医院名称</td>
			                                        <td>医院代码</td>
			                                        <td>商品编码</td>
			                                        <td>商品名称</td>
			                                        <td>商品规格</td>
			                                        <td>商品数量</td>
			                                        <td>供应价格</td>
			                                        <td>生产厂商</td>
			                                    </tr>
			                                    <tr>
			                                        <td>1</td>
			                                        <td>chk</td>
			                                        <td>chk</td>
			                                        <td>0001</td>
			                                        <td>甘草片</td>
			                                        <td>50片</td>
			                                        <td>500盒</td>
			                                        <td>1元</td>
			                                        <td>云南白药</td>
			                                    </tr>
												
			                                </tbody>
			                            </table>
			                            <table class="table_6c" style="display:none;">
			                                <tbody>
			                                    <tr>
			                                        <td>操作人</td>
			                                        <td>操作</td>
			                                        <td>操作时间</td>
			                                    </tr>
			                                    <tr>
			                                        <td>张梦楠</td>
			                                        <td>作废发票20197728192</td>
			                                        <td>2017-12-12</td>
			                                    </tr>
												
			                                </tbody>
			                            </table>
		                            </div>
		                            
		                        </td>
		                    </tr>
	                    </tbody>
                    </table>
                    <div class="body_empty" v-if="data.length==0">
                    	暂无数据
                    </div>
                </div>
            </div>
            
        </div>
        <p style="margin-top:10px;">
        	<Button type="primary" size="small" @click="kps()">
        	批量开票</Button>
        	<Button type="primary" size="small" @click="yls()">
        	批量预览</Button>

	        <Page  show-total :page-size="page.pageSize" :current="search.currentpage"	:total="page.total" 
       		show-total @on-change="changePage" style="float:right;" ></Page>
        </p><br/>
    </Card>
    <settlement-edit @refresh="getdata"></settlement-edit>
    <set-edit @refresh="getdata"></set-edit>
    <set-edits  @refresh="getdata"></set-edits>

    <set-edita @refresh="getdata" /></set-edita>
    <set-editb @refresh="getdata" /></set-editb>

	 <Modal
        v-model="kpConfirm"
        title="提示"
		width="400"
		:loading="loading"
        @on-ok="confirmKp">
        <p>确定开票？</p>
    </Modal>
</div>	
</template>
<script>
import SettlementEdit from "../Module/settlementedit.vue";
import SetEdit from "../Module/setedit.vue";
import SetEdits from "../Module/setedits.vue";
import SetEdita from "../Module/setedita.vue";
import SetEditb from "../Module/seteditb.vue";
export default {
	components:{SettlementEdit,SetEdit,SetEdits,SetEdita,SetEditb},
	data (){
		return {
			loading:false,
			kpConfirm:false,
			search:{orderNo:'',currentpage:1,invoiceNo:'',buyerName:null},
			page:{pageSize:15,total:1},
			types:['增值税专用发票'],check:false,
			data:[
				
			]
		}
	},methods:{
		kps(){
			var a=[];
			this.data.forEach(function(val){
				if(val.check){
					a.push(val.guid)
				}
			})
			if(a.length==0){
				this.$Message.error('请勾选');
				return;
			}
			this.kpConfirm = true;
		},confirmKp(){
			this.loading=true;
			var a=[];
			this.data.forEach(function(val){
				if(val.check){
					a.push(val.guid)
				}
			})
			if(a.length==0){
				this.$Message.error('请勾选');
				return;
			}
			this.axios.post('/outputinoivce/makeByOrder',
					a,{hideTip:true}).then((res)=>{
						this.kpConfirm = false;
						// this.$Modal.remove();
						if(res.errorCode==0){
							this.$Message.success(res.message);
							
						}else{
							this.$Modal.info({
								 title:'提示',
								   content: res.message,
								   width:500,
							})
							// this.$Message.error({
							// 	content: res.message,
							// 	duration: 10,
							// 	closable: true
							// });
						}
						this.check=false;
						this.getdata();
					})
		},yls(){
			var a=[];
			this.data.forEach(function(val){
				if(val.check){
					a.push({guid:val.guid,orderNo:val.orderNo})
				}
			})
			if(a.length==0){
				this.$Message.error('请勾选');
			}else{
				// this.data.forEach((val)=>{
				// 	val.check=false;
				// })
				this.$bus.emit('bus_setsedits',{data:a})
			}
		},
		changePage(pageNum){
			this.search.currentpage = pageNum;
     		this.getdata();
		},_link (){

		},_link2(){

		},show(item){
			
			this.$bus.emit('bus_settlementedit',item.guid)
		},getdata(type){
			if(type=='search'){
				this.search.currentpage=1;
			}
			this.axios.post('/order/list',
				this.search).then((res)=>{
				console.log(res);
				var d=res.data.list;
				for(var i=0;i<d.length;i++){
					d[i].show=false;
				}
				this.data=d;
				this.page.total=res.data.total;
				//this.page.pageSize=res.data.pageSize
				this.search.currentpage=res.data.pageNo || 1;
			})
		},_show(item){
			if(!item.list){
				this.axios.post('/outputinoivce/orderDetail',
					{guid:item.guid}).then((res)=>{
						console.log(res);
						if(res.errorCode==0){
							item.show=!item.show;
							item.list=res.data;
						}
						
				})
			}else{
				item.show=!item.show;
			}
		},kp(item){
			
			//return ;
			const msg = this.$Message.loading({
                    content: 'Loading...',
                    duration: 0
            });
			this.axios.post('/outputinoivce/invoicePreview',
					[item.guid]).then((res)=>{
				console.log(res)
				msg();
				if(!res.data){
					this.$Message.error(res.message);
					
				}else{
					//this.$Message.error(res.message);
					this.$bus.emit('bus_setsedit',{guid:item.guid,data:res.data})
				}
				
			})
		

			
		},_kp(item){
			this.$Modal.confirm({
                 title:'提示',
                 content: '<p>确定开票？</p>',
                 loading:true,
                 onOk:()=>{
                 	this.axios.post('/outputinoivce/makeInvoiceByOrder',
					{orderGuid:item.guid}).then((res)=>{
						this.$Modal.remove();
						if(res.errorCode==0){
							this.$Message.success(res.message);
							
						}else{
							//this.$Message.error(res.message);
						}
						this.getdata();
					})
                }
            })
		},checkchange(item){
			this.data.forEach(function(val){
				val.check=item;
			})
		}
	},mounted(){
		$('._table').resizableColumns({});
		$(this.$el).on('click','a[action=ac1]',function(){
			var a=$(this).parents('.ivu-table-tbody').find('.div1');
			var b=a.find('.table_6c');

			if(b.eq(0).css('display')=="table"){
				a.css('display','none')
				b.css('display','none')
			}else{
				a.css('display','block').find('.table_6c').hide().eq(0).show();
			}
		}).on('click','a[action=ac2]',function(){
			var a=$(this).parents('.ivu-table-tbody').find('.div1')
			var b=a.find('.table_6c');
			if(b.eq(1).css('display')=="table"){
				a.css('display','none')
				b.css('display','none')
			}else{
				a.css('display','block').find('.table_6c').hide().eq(1).show();
			}
		})
	},created(){
		this.getdata();
	},activated(){
		this.getdata();
	}
}
</script>